<template>
  <div>
    <h2>入库明细</h2>


    <hr>
    <el-table
        :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%">
      <!--1.-->
      <el-table-column
          prop="storeId"
          label="明细编号"
      >
      </el-table-column>
      <!--1.-->
      <el-table-column
          prop="goodsCode"
          label="商品编号"
      >
      </el-table-column>
      <!--2.-->
      <el-table-column
          prop="goodsName"
          label="商品名称"
      >
      </el-table-column>
      <!--3.-->
      <el-table-column
          prop="num"
          label="入库数量">
      </el-table-column>
      <!--4.-->
      <el-table-column
          prop="type"
          label="商品类型">
      </el-table-column>
      <!--5.-->
      <el-table-column
          prop="specs"
          label="商品规格">
      </el-table-column>
      <!--6.-->
      <el-table-column
          prop="batch"
          label="商品批次">
      </el-table-column>
      <!--7.-->
      <el-table-column
          prop="storeDate"
          label="操作时间">
      </el-table-column>
      <!--8.-->
      <el-table-column
          prop="operation"
          label="操作方式">
      </el-table-column>



    </el-table>

    <!--页面选择导航--开始-->
    <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="totalCount">
      </el-pagination>
    </div>
    <!--页面选择导航--结束-->

  </div>
</template>

<script>
export default {

  //一、名称区
  name: "GoodsInDetail",
  //二、数据区
  data(){
    return{
      //1.分页表格数据--开始//
      tableData:[],
      totalCount:null,
      //原型图填充数据
      // tableData:[{
      //   id: 1,
      //   goodsCode: 'sp1',
      //   goodsName: '篮球',
      //   num: '100',
      //   type: '文具',
      //   specs: '大号',
      //   batch: 'pc1',
      //   storeDate: '2021-10-10',
      //   operation: '采购入库',
      // },{
      //   id: 2,
      //   goodsCode: 'sp1',
      //   goodsName: '篮球',
      //   num: '20',
      //   type: '文具',
      //   specs: '大号',
      //   batch: 'pc1',
      //   storeDate: '2021-10-19',
      //   operation: '退货入库',
      // },{
      //   id: 3,
      //   goodsCode: 'sp1',
      //   goodsName: '篮球',
      //   num: '10',
      //   type: '文具',
      //   specs: '大号',
      //   batch: 'pc1',
      //   storeDate: '2021-10-21',
      //   operation: '退货入库',
      // },{
      //   id: 4,
      //   goodsCode: 'sp1',
      //   goodsName: '篮球',
      //   num: '30',
      //   type: '文具',
      //   specs: '大号',
      //   batch: 'pc1',
      //   storeDate: '2021-10-25',
      //   operation: '退货入库',
      // },],
      // totalCount:4,

      currentPage:1,
      pageSizes:[1,2,3,4],
      PageSize:3,
      //分页表格数据--结束//
      input:'',

    }
  },
  //三、方法区
  methods:{
    init(){

      this.$axios.get("/sscsys/sysgoods2/findAllInDetail").then(
          r=>{
            this.tableData=r.data;
            this.totalCount=r.data.length;
          });
    },
    //1.分页表格换页方法--开始//
    handleSizeChange(val) {
      this.PageSize=val
      this.currentPage=1
    },
    handleCurrentChange(val) {
      this.currentPage=val
    },
//1.分页表格换页方法--结束//


  },
  //四、初始化区
  mounted() {
    this.init();
  }

}
</script>



<style scoped>

</style>